<template>
  <div id="map" style="mymap">
    <div >
      <button @click="change_img" class="btn">卫星图</button>
      <button @click="change_vec" class="btn">街道图</button>
      <button @click="change_ter" class="btn">地形图</button>
    </div>
  </div>
</template>

<script>
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import { TileSuperMapRest } from "@supermap/iclient-ol";
import XYZ from "ol/source/XYZ";

//import { type } from "os";
import "ol/ol.css"

import TileArcGISRest from "ol/source/TileArcGISRest"
import { Vector as VectorLayer } from "ol/layer";
import {
  Circle as CircleStyle,
  Fill,
  Stroke,
  Style,
  Text,
  Icon
} from 'ol/style'

import { Cluster, Vector as VectorSource } from "ol/source"
import Point from "ol/geom/Point";
import Feature from "ol/Feature";
import Polygon from "ol/geom/Polygon";
import { getCenter } from "ol/extent";
import { toStringHDMS } from "ol/coordinate";
import {fromLonLat, toLonLat} from "ol/proj";
export default {
  name: "supermap",
  data(){
    return{
      map: null,
      map_img:null,
      map_vec:null,
      map_ter:null,
    }
  },
  mounted(){
    //挂载天地图
     this.supermapinit();
    //挂载超图
     this.mapinit();
  },
  methods:{
    //加载天地图
    supermapinit(){
      var view =new View({
        center: fromLonLat([115.87,37.82]),
        zoom: 12
      })
      this.map = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new XYZ({
              url:  'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d'
            })
          }),
          new TileLayer({
            source: new XYZ({
              url:  'http://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=406d2b04b58d2d49366047643dcc5f12'
            })
          })
        ],
        view: view
      })

    },
    //加载超图
    mapinit(){
      //var url = "http://192.168.32.187:8090/iserver/services/map-WYCSSJ0412/rest/maps/WYXDLTB"; //内网地址
      var url="http://123.56.110.82:8090/iserver/services/map-WYCSSJ0407/rest/maps/WYDLTB"; //外网地址
      this.map = new Map({
        target: "map",
        //controls: control.defaults({ attributionOptions: { collapsed: false } }).extend([new Logo()]),
        view: new View({
          center: [115.87,37.79],
          zoom: 11.5,
          projection: "EPSG:4326",
        })
      });
      var layer = new TileLayer({
        source: new TileSuperMapRest({
          url: url,
          wrapX: true,
          transparent:true,
        }),
        projection: "EPSG:4326"
      });
      this.map.addLayer(layer);
    },

    //天地图卫星图、天地图标识
    change_img (){
      var img = new TileLayer({
        source: new XYZ({
          url:  'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d'
        })
      });
      var name = new TileLayer({
        source: new XYZ({
          url:  'http://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=406d2b04b58d2d49366047643dcc5f12'
        })
      });

      this.map.addLayer(img);
      this.map.addLayer(name);
    },
    //显示卫星图
    change_vec(){
      var map_cva= new TileLayer({
        source: new XYZ({
          url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d"
        })
      });
      var map_vec =new TileLayer({
        source: new XYZ({
          url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d"
        })
      });

      this.map.addLayer(map_vec);
      this.map.addLayer(map_cva);
      //console.log(this.map.getLayers());
    },
    //显示矢量图
    change_ter(){
      var map_ter =new TileLayer({
        source: new XYZ({
          url: "http://t4.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d"
        })
      });
      var map_cta =new TileLayer({
        source: new XYZ({
          url:  "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d"
        })
      });
      this.map.addLayer(map_ter);
      this.map.addLayer(map_cta);
    }
  }
}
</script>

<style scoped>
#map{
  height: 940px;
  width: 1920px;
  border: 2px solid  #ff0000;
}
</style>
